<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI slider documentation</title>

<style>
body {
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif"
}

.gutter {
	display: none;
}
</style>
</head>
<body>

	<script>{
		"title":
			"Slider Widget",
		"excerpt":
			"Drag a handle to select a numeric value.",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script>
	<article id="slider1" class="entry widget">
		<h2 class="section-title">
			<span>Slider Widget</span><span class="version-details">version
				added: 1.5</span>
		</h2>
		<div class="entry-wrapper">
			<p class="desc">
				<strong>Description: </strong>Drag a handle to select a numeric
				value.
			</p>
			<section id="quick-nav">
				<header>
					<h2>
						QuickNav<a href="#entry-examples">Examples</a>
					</h2>
				</header>
				<div class="quick-nav-section">
					<h3>Options</h3>
					<div>
						<a href="#option-animate">animate</a>
					</div>
					<div>
						<a href="#option-disabled">disabled</a>
					</div>
					<div>
						<a href="#option-max">max</a>
					</div>
					<div>
						<a href="#option-min">min</a>
					</div>
					<div>
						<a href="#option-orientation">orientation</a>
					</div>
					<div>
						<a href="#option-range">range</a>
					</div>
					<div>
						<a href="#option-step">step</a>
					</div>
					<div>
						<a href="#option-value">value</a>
					</div>
					<div>
						<a href="#option-values">values</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Methods</h3>
					<div>
						<a href="#method-destroy">destroy</a>
					</div>
					<div>
						<a href="#method-disable">disable</a>
					</div>
					<div>
						<a href="#method-enable">enable</a>
					</div>
					<div>
						<a href="#method-option">option</a>
					</div>
					<div>
						<a href="#method-value">value</a>
					</div>
					<div>
						<a href="#method-values">values</a>
					</div>
					<div>
						<a href="#method-widget">widget</a>
					</div>
				</div>
				<div class="quick-nav-section">
					<h3>Events</h3>
					<div>
						<a href="#event-create">create</a>
					</div>
					<div>
						<a href="#event-start">start</a>
					</div>
					<div>
						<a href="#event-slide">slide</a>
					</div>
					<div>
						<a href="#event-change">change</a>
					</div>
					<div>
						<a href="#event-stop">stop</a>
					</div>
				</div>
			</section>
			<div class="longdesc" id="entry-longdesc">
				<p>The jQuery UI Slider plugin makes selected elements into
					sliders. There are various options such as multiple handles and
					ranges. The handle can be moved with the mouse or the arrow keys.</p>

				<p>
					The slider widget will create handle elements with the class
					<code>ui-slider-handle</code>
					on initialization. You can specify custom handle elements by
					creating and appending the elements and adding the
					<code>ui-slider-handle</code>
					class before initialization. It will only create the number of
					handles needed to match the length of <a href="#option-value"><code>value</code></a>/<a
						href="#option-values"><code>values</code></a>. For example, if you
					specify
					<code>values: [ 1, 5, 18 ]</code>
					and create one custom handle, the plugin will create the other two.
				</p>

				<h3>Dependencies</h3>
				<ul>
					<li><a href="/category/ui-core/">UI Core</a></li>
					<li><a href="/jQuery.widget/">Widget Factory</a></li>
					<li><a href="/mouse/">Mouse Interaction</a></li>
				</ul>
			</div>
			<h3>Additional Notes:</h3>
			<div class="longdesc">
				<ul>
					<li>This widget requires some functional CSS, otherwise it
						won't work. If you build a custom theme, use the widget's specific
						CSS file as a starting point.</li>
				</ul>
			</div>
			<section id="options">
				<header>
					<h2 class="underline">Options</h2>
				</header>
				<div id="option-animate" class="api-item first-item">
					<h3>
						animate<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a
							href="http://api.jquery.com/Types#String">String</a> or <a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Whether to slide the handle smoothly when the user clicks on the
						slider track. Also accepts any valid <a
							href="//api.jquery.com/animate/#duration">animation duration</a>.
					</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Boolean</strong>: When set to <code>true</code>,
							the handle will animate with the default duration.</li>
						<li><strong>String</strong>: The name of a speed, such as <code>"fast"</code>
							or <code>"slow"</code>.</li>
						<li><strong>Number</strong>: The duration of the animation,
							in milliseconds.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the animate option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ animate: <span
															class="string">"fast"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the animate option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> animate = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"animate"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"animate"</span>, <span
															class="string">"fast"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-disabled" class="api-item">
					<h3>
						disabled<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>
						Disables the slider if set to
						<code>true</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the disabled option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ disabled: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the disabled option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> disabled = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"disabled"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-max" class="api-item">
					<h3>
						max<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>100</code>
					</div>
					<div>The maximum value of the slider.</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the max option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ max: <span
															class="number">50</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the max option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> max = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"max"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"max"</span>, <span
															class="number">50</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-min" class="api-item">
					<h3>
						min<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>The minimum value of the slider.</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the min option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ min: <span
															class="number">10</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the min option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> min = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"min"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"min"</span>, <span
															class="number">10</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-orientation" class="api-item">
					<h3>
						orientation<span class="option-type"><strong>Type:
						</strong><a href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>"horizontal"</code>
					</div>
					<div>
						Determines whether the slider handles move horizontally (min on
						left, max on right) or vertically (min on bottom, max on top).
						Possible values:
						<code>"horizontal"</code>
						,
						<code>"vertical"</code>
						.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the orientation option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ orientation: <span
															class="string">"vertical"</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the orientation option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> orientation = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"orientation"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"orientation"</span>, <span
															class="string">"vertical"</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-range" class="api-item">
					<h3>
						range<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a
							href="http://api.jquery.com/Types#String">String</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>false</code>
					</div>
					<div>Whether the slider represents a range.</div>
					<strong>Multiple types supported:</strong>
					<ul>
						<li><strong>Boolean</strong>: If set to <code>true</code>,
							the slider will detect if you have two handles and create a
							stylable range element between these two.</li>
						<li><strong>String</strong>: Either <code>"min"</code> or <code>"max"</code>.
							A min range goes from the slider min to one handle. A max range
							goes from one handle to the slider max.</li>
					</ul>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the range option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ range: <span
															class="literal">true</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the range option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> range = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"range"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"range"</span>, <span
															class="literal">true</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-step" class="api-item">
					<h3>
						step<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>1</code>
					</div>
					<div>Determines the size or amount of each interval or step
						the slider takes between the min and max. The full specified value
						range of the slider (max - min) should be evenly divisible by the
						step.</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the step option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ step: <span
															class="number">5</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the step option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> step = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"step"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"step"</span>, <span
															class="number">5</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-value" class="api-item">
					<h3>
						value<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Number">Number</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>0</code>
					</div>
					<div>Determines the value of the slider, if there's only one
						handle. If there is more than one handle, determines the value of
						the first handle.</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the value option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ value: <span
															class="number">10</span> });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the value option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> value = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"value"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"value"</span>, <span
															class="number">10</span> );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
				<div id="option-values" class="api-item">
					<h3>
						values<span class="option-type"><strong>Type: </strong><a
							href="http://api.jquery.com/Types#Array">Array</a></span>
					</h3>
					<div class="default">
						<strong>Default: </strong>
						<code>null</code>
					</div>
					<div>
						This option can be used to specify multiple handles. If the <a
							href="#option-range"><code>range</code></a> option is set to
						<code>true</code>
						, the length of
						<code>values</code>
						should be 2.
					</div>
					<strong>Code examples:</strong>
					<p>Initialize the slider with the values option specified:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider({ values: [ <span
															class="number">10</span>, <span class="number">25</span> ] });</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<p>Get or set the values option, after initialization:</p>
					<div class="syntaxhighlighter javascript nogutter">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// getter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="keyword">var</span> values = $( <span
															class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"values"</span> );</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="comment">// setter</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">".selector"</span> ).slider( <span
															class="string">"option"</span>, <span class="string">"values"</span>, [ <span
															class="number">10</span>, <span class="number">25</span> ] );</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
			</section>
			<section id="methods">
				<header>
					<h2 class="underline">Methods</h2>
				</header>
				<div id="method-destroy">
					<div class="api-item first-item">
						<h3>destroy()</h3>
						<div>Removes the slider functionality completely. This will
							return the element back to its pre-init state.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the destroy method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"destroy"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-disable">
					<div class="api-item">
						<h3>disable()</h3>
						<div>Disables the slider.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the disable method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"disable"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-enable">
					<div class="api-item">
						<h3>enable()</h3>
						<div>Enables the slider.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the enable method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"enable"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-option">
					<div class="api-item">
						<h3>
							option( optionName )<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Object">Object</a></span>
						</h3>
						<div>
							Gets the value currently associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to get.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> isDisabled = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>
							option()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
						</h3>
						<div>Gets an object containing key/value pairs representing
							the current slider options hash.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> options = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"option"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( optionName, value )</h3>
						<div>
							Sets the value of the slider option associated with the specified
							<code>optionName</code>
							.
						</div>
						<ul>
							<li>
								<div>
									<strong>optionName</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#String">String</a>
								</div>
								<div>The name of the option to set.</div>
							</li>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A value to set for the option.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"option"</span>, <span class="string">"disabled"</span>, <span
																	class="literal">true</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>option( options )</h3>
						<div>Sets one or more options for the slider.</div>
						<ul>
							<li>
								<div>
									<strong>options</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Object">Object</a>
								</div>
								<div>A map of option-value pairs to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"option"</span>, { disabled: <span
																	class="literal">true</span> } );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-value">
					<div class="api-item">
						<h3>
							value()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Number">Number</a></span>
						</h3>
						<div>Get the value of the slider.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> selection = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"value"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>value( value )</h3>
						<div>Set the value of the slider.</div>
						<ul>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Number">Number</a>
								</div>
								<div>The value to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"value"</span>, <span class="number">55</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-values">
					<div class="api-item">
						<h3>
							values()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Array">Array</a></span>
						</h3>
						<div>Get the value for all handles.</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> values = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"values"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>
							values( index )<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#Number">Number</a></span>
						</h3>
						<div>Get the value for the specified handle.</div>
						<ul>
							<li>
								<div>
									<strong>index</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Integer">Integer</a>
								</div>
								<div>The zero-based index of the handle.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> value = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"values"</span>, <span class="number">0</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>values( index, value )</h3>
						<div>Set the value for the specified handle.</div>
						<ul>
							<li>
								<div>
									<strong>index</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Integer">Integer</a>
								</div>
								<div>The zero-based index of the handle.</div>
							</li>
							<li>
								<div>
									<strong>value</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Number">Number</a>
								</div>
								<div>The value to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"values"</span>, <span class="number">0</span>, <span
																	class="number">55</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
					<div class="api-item">
						<h3>values( values )</h3>
						<div>Set the value for all handles.</div>
						<ul>
							<li>
								<div>
									<strong>values</strong>
								</div>
								<div>
									Type: <a href="http://api.jquery.com/Types#Array">Array</a>
								</div>
								<div>The values to set.</div>
							</li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>$( <span class="string">".selector"</span> ).slider( <span
																	class="string">"values"</span>, [ <span class="number">55</span>, <span
																	class="number">105</span> ] );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
				<div id="method-widget">
					<div class="api-item">
						<h3>
							widget()<span class="returns">Returns: <a
								href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
						</h3>
						<div>
							Returns a
							<code>jQuery</code>
							object containing the slider.
						</div>
						<ul>
							<li><div class="null-signature">This method does not
									accept any arguments.</div></li>
						</ul>
						<div>
							<strong>Code examples:</strong>
							<p>Invoke the widget method:</p>
							<div class="syntaxhighlighter javascript nogutter">
								<table>
									<tbody>
										<tr>
											<td class="gutter">

												<div class="line n1">1</div>

											</td>
											<td class="code"><pre>
													<div class="container">
														<div class="line">
															<code>
																<span class="keyword">var</span> widget = $( <span
																	class="string">".selector"</span> ).slider( <span
																	class="string">"widget"</span> );</code>
														</div>
													</div>
												</pre></td>
										</tr>
									</tbody>
								</table>
							</div>

						</div>
					</div>
				</div>
			</section>
			<section id="events">
				<header>
					<h2 class="underline">Events</h2>
				</header>
				<div id="event-change" class="api-item first-item">
					<h3>
						change( event, ui )<span class="returns">Type: <code>slidechange</code></span>
					</h3>
					<div>
						Triggered after the user slides a handle, if the value has
						changed; or if the value is changed programmatically via the <a
							href="#method-value"><code>value</code></a> method.
					</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>handle</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
									</div>
									<div>The jQuery object representing the handle that was
										changed.</div>
								</li>
								<li>
									<div>
										<strong>value</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Number">Number</a>
									</div>
									<div>The current value of the slider.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the slider with the change callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).slider({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  change: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the slidechange event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"slidechange"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-create" class="api-item">
					<h3>
						create( event, ui )<span class="returns">Type: <code>slidecreate</code></span>
					</h3>
					<div>Triggered when the slider is created.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the slider with the create callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).slider({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  create: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the slidecreate event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"slidecreate"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-slide" class="api-item">
					<h3>
						slide( event, ui )<span class="returns">Type: <code>slide</code></span>
					</h3>
					<div>
						Triggered on every mouse move during slide. The value provided in
						the event as
						<code>ui.value</code>
						represents the value that the handle will have as a result of the
						current movement. Canceling the event will prevent the handle from
						moving and the handle will continue to have its previous value.
					</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>handle</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
									</div>
									<div>The jQuery object representing the handle being
										moved.</div>
								</li>
								<li>
									<div>
										<strong>value</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Number">Number</a>
									</div>
									<div>The value that the handle will move to if the event
										is not canceled.</div>
								</li>
								<li>
									<div>
										<strong>values</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Array">Array</a>
									</div>
									<div>An array of the current values of a multi-handled
										slider.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the slider with the slide callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).slider({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  slide: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the slide event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"slide"</span>, <span class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-start" class="api-item">
					<h3>
						start( event, ui )<span class="returns">Type: <code>slidestart</code></span>
					</h3>
					<div>Triggered when the user starts sliding.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>handle</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
									</div>
									<div>The jQuery object representing the handle being
										moved.</div>
								</li>
								<li>
									<div>
										<strong>value</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Number">Number</a>
									</div>
									<div>The current value of the slider.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the slider with the start callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).slider({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  start: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the slidestart event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"slidestart"</span>, <span
																class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
				<div id="event-stop" class="api-item">
					<h3>
						stop( event, ui )<span class="returns">Type: <code>slidestop</code></span>
					</h3>
					<div>Triggered after the user slides a handle.</div>
					<ul>
						<li>
							<div>
								<strong>event</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Event">Event</a>
							</div>
							<div></div>
						</li>
						<li>
							<div>
								<strong>ui</strong>
							</div>
							<div>
								Type: <a href="http://api.jquery.com/Types#Object">Object</a>
							</div>
							<div></div>
							<ul>
								<li>
									<div>
										<strong>handle</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
									</div>
									<div>The jQuery object representing the handle that was
										moved.</div>
								</li>
								<li>
									<div>
										<strong>value</strong>
									</div>
									<div>
										Type: <a href="http://api.jquery.com/Types#Number">Number</a>
									</div>
									<div>The current value of the slider.</div>
								</li>
							</ul>
						</li>
					</ul>
					<div>
						<strong>Code examples:</strong>
						<p>Initialize the slider with the stop callback specified:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

											<div class="line n2">2</div>

											<div class="line n3">3</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).slider({</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>  stop: <span class="keyword">function</span>( event, ui ) {}</code>
													</div>
												</div>
												<div class="container">
													<div class="line">
														<code>});</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>Bind an event listener to the slidestop event:</p>
						<div class="syntaxhighlighter javascript nogutter">
							<table>
								<tbody>
									<tr>
										<td class="gutter">

											<div class="line n1">1</div>

										</td>
										<td class="code"><pre>
												<div class="container">
													<div class="line">
														<code>$( <span class="string">".selector"</span> ).on( <span
																class="string">"slidestop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code>
													</div>
												</div>
											</pre></td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</section>
			<section class="entry-examples" id="entry-examples">
				<header>
					<h2 class="underline">Example:</h2>
				</header>
				<div class="entry-example" id="example-0">
					<h4>
						<span class="desc">A simple jQuery UI Slider.</span>
					</h4>
					<div class="syntaxhighlighter xml ">
						<table>
							<tbody>
								<tr>
									<td class="gutter">

										<div class="line n1">1</div>

										<div class="line n2">2</div>

										<div class="line n3">3</div>

										<div class="line n4">4</div>

										<div class="line n5">5</div>

										<div class="line n6">6</div>

										<div class="line n7">7</div>

										<div class="line n8">8</div>

										<div class="line n9">9</div>

										<div class="line n10">10</div>

										<div class="line n11">11</div>

										<div class="line n12">12</div>

										<div class="line n13">13</div>

										<div class="line n14">14</div>

										<div class="line n15">15</div>

										<div class="line n16">16</div>

										<div class="line n17">17</div>

										<div class="line n18">18</div>

										<div class="line n19">19</div>

										<div class="line n20">20</div>

									</td>
									<td class="code"><pre>
											<div class="container">
												<div class="line">
													<code>
														<span class="doctype">&lt;!doctype html&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">html</span> <span
															class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">meta</span> <span class="attribute">charset</span>=<span
															class="value">"utf-8"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">title</span>&gt;</span>slider demo<span
															class="tag">&lt;/<span class="title">title</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">link</span> <span class="attribute">rel</span>=<span
															class="value">"stylesheet"</span> <span class="attribute">href</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">style</span>&gt;</span><span class="css"><span
															class="id">#slider</span> <span class="rules">{ <span
																class="rule"><span class="attribute">margin</span>:<span
																	class="value"> <span class="number">10</span>px;</span></span> <span
																class="rule">}</span></span>	</span><span class="tag">&lt;/<span
															class="title">style</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/jquery-1.8.3.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>  <span class="tag">&lt;<span
															class="title">script</span> <span class="attribute">src</span>=<span
															class="value">"http://code.jquery.com/ui/1.9.2/jquery-ui.js"</span>&gt;</span><span
															class="javascript"></span><span class="tag">&lt;/<span
															class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">head</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">div</span> <span
															class="attribute">id</span>=<span class="value">"slider"</span>&gt;</span><span
															class="tag">&lt;/<span class="title">div</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;<span class="title">script</span>&gt;</span><span
															class="javascript"></span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>$( <span class="string">"#slider"</span> ).slider();</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">script</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code> </code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">body</span>&gt;</span>
													</code>
												</div>
											</div>
											<div class="container">
												<div class="line">
													<code>
														<span class="tag">&lt;/<span class="title">html</span>&gt;</span>
													</code>
												</div>
											</div>
										</pre></td>
								</tr>
							</tbody>
						</table>
					</div>

					<h4>Demo:</h4>
					<div class="demo code-demo" data-height="50"></div>
				</div>
			</section>
		</div>
	</article>

</body>
</html>
